<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        需求:
        1.展示页面
        2.删除功能
        3.添加功能

     -->
     <div id="app">
        <table border="1px" width="50%" height="450px" align="center" cellspacing="0">
            <tr>
                <th>编号</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item , index) in items"  align="center">
                <td>{{index + 1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>{{item.price}}</td>
                <td><button :disabled="item.count === 1" @click="sub(index)">-</button>{{item.count}}<button @click="add(index)">+</button></td>
                <td><a href="#"  @click.prevent="deleteItem(index)">移除</a></td>
            </tr>
            <tr >
                <td colspan="6">
                    <h1>总价格：{{totalprice()}}</h1>
                </td>
            </tr>
        </table>
     </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data : {
                items : [
                    {
                        name:"《java编程思想》",
                        date:"2020-9",
                        price:"￥98.00",
                        p : 98.00,
                        count : 1
                    },
                    {
                        name:"《数据分析与数据原理》",
                        date:"2019-2",
                        price:"￥39.00",
                        p : 39.00,
                        count : 1
                    },
                    {
                        name:"《Hadoop权威指南》",
                        date:"2019-10",
                        price:"￥59.00",
                        p : 59.00,
                        count : 1
                    },
                    {
                        name:"《代码大全》",
                        date:"2018-8",
                        price:"￥128.00",
                        p : 128.00,
                        count : 1
                    }],
            },
            methods : {
                deleteItem:function(index){
                    //确认删除提示
                    if(confirm("您是否确认删除?")){
                        //删除一行元素  splice(index,个数)
                        this.items.splice(index,1);
                    }
                }, 
                add:function(index){
                    this.items[index].count+=1;
                },
                sub:function(index){
                    this.items[index].count-=1;
                },
                totalprice: function(){
                    var tp=0;
                    for(var i=0;i<this.items.length;i++){
                        tp+=this.items[i].p*this.items[i].count;
                    }
                    return tp;
                }
            }
        })
    </script>
</html>